<template>
  <div class="project">
    <div class="v-title">
      <span>项目列表</span>
      <a slot="extra" @click="apply">申请新的项目信用</a>
    </div>

    <a-card
      style="margin-top: 16px; border-radius: 6px;"
      :body-style="{ padding: '24px' }"
    >
      <div class="status-list">
        <div
          class="status-item"
          @click="selectStatus(item)"
          :class="{ active: item.value == query.status }"
          v-for="item in statusOptions"
          :key="item.value"
        >
          <a-badge :count="item.count" :overflow-count="999" />

          <span>{{ item.name }}</span>
        </div>
      </div>
    </a-card>

    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :bordered="false"
      :data-source="list"
      :pagination="pagination"
      rowKey="ID"
    >
      <div slot="CreatedAt" slot-scope="text">
        {{ format(text) }}
      </div>
      <div slot="nowStatus" slot-scope="text">
        {{ text | status }}
      </div>

      <div slot="action" slot-scope="text, record">
        <a @click="goDetal(record)">详情</a>
        <a
          style="margin-left: 12px;"
          @click="edit(record)"
          v-if="record.nowStatus == 7"
        >
          编辑
        </a>
      </div>
    </a-table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import storage from "@/utils/storage";
const columns = [
  {
    title: "项目名称",
    dataIndex: "proName",
    scopedSlots: { customRender: "proName" }
  },
  {
    title: "施工单位",
    dataIndex: "conUnit",
    scopedSlots: { customRender: "conUnit" },
    align: "center"
  },
  {
    title: "申请授权总金额",
    dataIndex: "applyPrice",
    scopedSlots: { customRender: "applyPrice" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "nowStatus",
    scopedSlots: { customRender: "nowStatus" },
    align: "center"
  },
  {
    title: "申请时间",
    dataIndex: "CreatedAt",
    scopedSlots: { customRender: "CreatedAt" },
    align: "center"
  },

  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];
export default {
  data() {
    return {
      statusOptions: [
        {
          name: "全部",
          value: undefined,
          count: 8
        },
        {
          name: "待审核",
          count: 0,
          value: 1
        },
        // {
        //   name: "审核驳回",
        //   count: 8,
        //   value: 2
        // },
        {
          name: "审核通过",
          count: 0,
          value: 3
        }
      ],
      columns,
      list: [],
      pagination: {
        total: 0,
        showTotal: total => `共${total}条`,
        pageSize: 20,
        onChange: page => {
          this.query.page = page;
        }
      },
      query: {
        page: 1,
        class: 1,
        page_size: 20,
        status: undefined
      }
    };
  },
  filters: {
    status(status) {
      const map = {
        10: "待审核",
        1: "待授信",
        2: "授信中",
        8: "律师审核中",
        3: "还款中",
        4: "已延迟",
        5: "冻结中",
        6: "已完成",
        7: "已逾期"
      };

      return map[status];
    }
  },
  mounted() {
    let userProject = this.account.user_project;
    // eslint-disable-next-line no-empty
    this.statusOptions[0].count = userProject.length;
    for (let i = 0; i < userProject.length; i++) {
      // eslint-disable-next-line no-empty
      if (userProject[i].nowStatus === 10) {
        this.statusOptions[1].count++;
      } else {
        this.statusOptions[2].count++;
      }
    }
    this.list = this.account.user_project;
  },
  computed: {},
  methods: {
    selectStatus(item) {
      this.query.status = item.value;
      if (item.value === undefined) {
        this.list = this.account.user_project;
      }
      item.value;
      let userProject = this.account.user_project;
      if (item.value === 1) {
        this.list = [];
        for (let i = 0; i < userProject.length; i++) {
          if (userProject[i].nowStatus === 10) {
            this.list.push(userProject[i]);
          }
        }
      }
      if (item.value === 3) {
        this.list = [];
        for (let i = 0; i < userProject.length; i++) {
          if (userProject[i].nowStatus !== 10) {
            this.list.push(userProject[i]);
          }
        }
      }
    },
    format(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
    edit(item) {
      storage.setItem("PROJECT_APPLY_STEP2", item);
      storage.setItem("PROJECT_APPLY_STEP3", item);
      this.$router.push({
        path: "/project/apply/step2",
        query: {
          id: item.ID
        }
      });
    },
    apply() {
      if (this.account.applyStatus != 3) {
        this.$message.info("请先认证企业会员");
        return;
      }

      storage.removeItem("PROJECT_APPLY_STEP2");
      storage.removeItem("PROJECT_APPLY_STEP3");
      this.$router.push({
        path: "/project/apply/step1"
      });
    },
    goDetal(item) {
      storage.setItem("CURRENT_PROJECT", item);
      this.$router.push({
        path: "/project/" + item.ID
      });
    }
  }
};
</script>

<style lang="less" scoped>
.project {
  background: @white;
  padding: 20px 40px 20px 20px;

  .v-title {
    display: flex;
    justify-content: space-between;

    a {
      font-size: 16px;
    }
  }

  .status-list {
    display: flex;

    .status-item {
      margin-right: 28px;
      border: 1px solid @border-color;
      padding: 5px 18px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      font-weight: bold;
      color: @text-color-2;

      /deep/.ant-badge {
        position: absolute;
        right: -8px;
        top: -8px;

        .ant-badge-count {
          background: #409eff;
        }
      }

      &.active {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
    }
  }
}
</style>
